推荐好文 vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，如果不了解的话，我们开发调整样式的时候很容易出错。

要了解vertical-align属性，必须懂得基线，怎么理解基线呢？ 1、我们写网页是在一个矩形的显示屏上，经常是一行一行来布局，不可避免的是一行中会有多个内容，那么这行内容是如何上下对齐的呢？答案就是默认让他们的基线对齐。

2、各种字体、图片、行内html元素等可展示的内容都有各自的基线，要想知道具体内容的基线我们可以找一个简单的参照物：小写字母“x”，为什么找它呢？因为英文字母的基线恰好就是小写"x"的最下方，比较容易看出。

知道了以上两点我们就可以很容易知道其他内容元素的基线位置了，把其他元素和小写“x”放在一行展示一下就一眼可以看出了：

line-height的数字值是和font-size大小相关的； vertical-align的百分比值是和line-height值相关的；

上面实例 ​ 如上代码片段result所示，图片下面有一明显的红色条条，😡什么鬼，很诡异不是么，我要的是img充满整个div啊!!!好吧，我加了一个额外的inline元素填写内容Xx,发现原来多出来的那一块正好是文字的下半空白部分。吆喝，这么巧？实际上，如果将这里的Xx内容去掉，只剩下img，那个条条依然存在，表现行为好像父元素div里面除了img元素还有一个空白的元素一样，😕姑且叫它空白节点吧(肉眼中不存在却在影响着布局)，这个是比较诡异的一个表现，查标准没找到有相关的说明。但请将这个空白节点先记住，我们的重点是研究条条是咋出来的。这条条看上去貌似是文本和图片垂直方向上对齐生成的，那么这就引粗来一个问题，inline元素默认的垂直方向的对齐方式是什么样的？也就是vertical-align的默认值是啥？

​ OK，🤣I know you know。vertical-align默认值是baseline，OK，那就先来挖一挖vertical-align具体是个什么鬼。

vertical-align这个属性我感觉是CSS中最复杂的属性之一了…好多问题概念也让人看不懂…一方面它是作用在inline元素和table-cell元素身上，属性值特别多，另一方面该属性规范里并没有一个定论，导致一些属性不同浏览器的实现也不同，所以兼容性问题很多。对于一些 可替换元素，比如textarea， HTML标准没有说明它的基线，这意味着对其使用这个关键字，各浏览器表现可能不一样。我们这里先研究一下它的默认值baseline。 baseline字面意思就是基线，何为基线？首先请记住下面这几个概念：

基线：小写字母’x’的下边缘所在的那条线； x-height: 小写字母’x’的高度; ex: 1ex就是一个小写字母’x’的高度，类似em单位，注意,ex和em都是相对单位； 我们看下CSS标准里怎么说的：相关标准链接

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge. 'inline-block’元素的基线是标准流中最后一个line box(行盒)的基线, 除非这个line box里面既没有in-flow line boxes(行内框)或者本身’overflow’属性的计算值不是’visible’, 这种情况下基线是该元素margin底边缘。

那么上面现象就很容易解释的通了，我们知道img元素默认的表现形式和inline-block元素一样，它的基线就是margin底边缘，而inline元素本身是有高度的，两者基线对齐自然就如上面那样表现了。🐷

😳好吧，等会，到这里，我们发现实际又多了俩概念——inline元素的高度问题和标准里说的line box（IFC）。

首先我们先来看下inline元素的高度问题，即——line-height属性。

CSS中起高度作用的只有height和line-height两个属性吧。如果一个元素没设置height那么其最终的高度一定是由line-height决定的。之前inline元素的高度我以为是文字内容撑开的，但实际研究了下并不是这样的，看下面的🌰：

演示 如上可证明，inline元素的高度决定者是line-height，并不是文字内容撑开的。✌️

CSS规范里对line-height的默认值有这么一句话： We recommend a used value for ‘normal’ between 1.0 to 1.2. 只是推荐…🌞是不是说实际上各个浏览器对于line-height的默认值实现不一定是一样的，但都介于1.0-1.2之间。具体各大浏览器的实现值待查证。这里需要记住line-height的默认值是啥就OK。

相较于BFC，IFC要复杂得多，规范里IFC的篇幅也要比BFC多得多。

简要总结下BFC，即块级元素可能会触发块级格式上下文(BFC)，在块级格式上下文中，块级盒子竖直方向排列，不受上下文外部元素影响，自成一方世界。块容器盒指的是那些包含元素的盒子，块容器盒可能包含其它块级盒，也可能生成一个行内格式上下文(IFC)。🌲

但块容器盒要么只包含行内盒，要么只包含块级盒。但通常会同时包含两者。在这种情况下，将创建匿名块盒来包含毗邻的行内级盒。

看个🍐：

如上，demo1将创建两个匿名块盒，一个包含 p前面的文本 (Some inline text)， 一个包含 p 后面的文本(followed by more inline text)。

demo2将生成一个行内格式上下文，生成一个匿名行盒(line box)，里面包含两个匿名行内盒(inline box)，Some inline text和followed by more inline text.和一个span行内盒。

OK，至于怎么触发块级格式上下文请看块格式化上下文。这里只为了说明IFC而介绍下BFC。

当元素的 CSS 属性 display 的计算值为 inline, inline-block 或 inline-table时，称它为行内级元素。 行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(Inline boxes)。

规范里IFC文字很多，提炼下我们需要的：

如果一个矩形区域，包含着一些排成一条线的盒子，称为line box。 一个line box的宽度，由他的包含块(containg block)和floats的存在情况决定。line box的高度，由你给出的代码决定。(line-height)，即所有inline box的最大高度差。 当盒子的高度小于父级盒子高度时，垂直方向的对齐’vertical-align’属性决定。

在上面的vertical-align(1)中主要了解了什么是baseline，以及它是如何确定的。我们继续研究这个属性，看下面说明表格： 除了baseline我们已经很了解之外，其它几个属性我们貌似也能看懂，唯一的问题可能是父元素的顶端低端都是什么鬼？😳需要确定一下，好的再次拿我们第一个例子来讲解，但我们需要变一下，加点东西进去：

通过IFC部分我们知道，之前的例子实际上有生成一个匿名行盒(line box)，虽然他可以继承父元素的属性，但我们没法直观的去操作它😤，OK，把这个匿名行盒变成可控的span元素就好了🤣，如上demo所示。

我们通过设置line box的line-height来控制line-box的高度,然后设置img的vertical-align属性值，来观察具体的对齐方式。OK，读者你可以自行本地测试或是直接更改fiddle内容来看效果。但这里很容易有个误区，就是父元素的middle，top这些值是怎么确定的？如上，我们通过更改img元素的vertical-align的值，来观察区别，表面上看着好像是父元素根据Xx内容来进行确定的，实则不然。我们再来看一个例子： 栗子 上面例子中，我们更改了Xx的对齐方式，发现了很奇特的现象🙄，当Xx设置为text-bottom或是text-top的时候父元素(ling box)被撑大了🌺，但这另一方面这也证明了，父元素的基线和中线等并不是由文本Xx决定的，谁决定的呢？前面提过的那个空白节点决定的！🐂这个空白节点实际上是理解内联元素布局的重点！不知道它的存在，很多问题是搞不清楚的。那么这个空白节点又到底是怎么影响布局的呢？前面说过基线的决定着是小写字母x，这个时候问题就来了，可能你早就想问了，不同字体下面的小写字母x底部边缘肯定是有区别的啊，好，我们在研究下font-family。

关于字体具体的知识可以看这篇博文，我简单的总结一下重点。首先字体是有一个字体度量的概念的，

一款字体会定义一个 em-square，它是用来盛放字符的金属容器。这个 em-square 一般被设定为宽高均为 1000 相对单位，不过也可以是 1024、2048 相对单位。 字体度量都是基于这个相对单位设置的，包括 ascender、descender、capital height、x-height 等。注意这里面的值是可以超出em-square范围的。 在浏览器中，上面的 1000 相对单位会按照你需要的 font-size 缩放。 看上面的例子我们也能看出来，实际上一个内联元素是有两个高度的content-area高度(background-color实际渲染的那个高度)和 virtual-area 高度(实际区域占空间的高度也就是line-height)。💯

所有的内联元素都有两个高度 基于字体度量的 content-area virtual-area（也就是 line-height ） 内联元素都有一个空白节点存在着来确定基线等概念； 基线的确定和字体有关，和内部的内联元素无关； IFC很难懂； line-box(行盒) 的高度的受其子元素的 line-height 和 vertical-align 的影响； 我们貌似没法用CSS来更改字体度量。 题目确实有些标题党的嫌疑了，实际上也没有挖很深，比如vertical-align在inline-table元素的作用效果以及sup,sub等其他的属性值，以及line-height具体的属性值如何生效的都没有涉及。我想把这篇文章重点放在布局上，而且篇幅也有限。没涉及的请自行查阅资料吧，在此说声抱歉。😞

❤️以上。